<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        ul {
            list-style: none;
            width: 400px;
            display: flex;
            margin: 0 auto;
            padding: 0;
            justify-content: space-around;
        }

        a {
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(img/star.png);
        }

        a.one {
            background-position: 0px -28px;
        }
        span{
            width: 200px;
            height: 50px;
            display: inline-block;
            border: 1px solid red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
             <span></span>
        </ul>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $(function () {
        var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
                 
    var apple;
        $('li').hover(function () {
            $('a:lt(' + ($(this).index() + 1) + ')').addClass('one');
            $('a:gt(' + ($(this).index()) + ')').removeClass('one');
            var amsg = msg[$(this).index()];
            $('span').html('<strong style="color:red;">'+ ($(this).index()+1) + '分 '+ 
            amsg.split('|')[0] + 
            '</strong><br>'+
            amsg.split('|')[1])
             $('li').click(function () {
             apple = true;
            $('a:lt(' + ($(this).index() + 1) + ')').addClass('one');
            
        })
        },function(){
            if (apple!=true) {
                 $('a').removeClass('one');
            }
             $('a:lt(' + ($(this).index()) + ')').addClass('one')
           
             
        })

        

    })

</script>